import React, { Component } from 'react';
import $ from "jquery";
import "../css/base.css";
import "../css/login.css";
import {connect} from "react-redux";
import {BrowserRouter as Router, Route,Link} from 'react-router-dom';


class Logins extends Component {
  componentDidMount(){
  	this.props.changeTitle("我的");
	// var that = this;
	// var id=this.props.location.pathname.match(/\d*/g).join(''); 
	// console.log(id);
	// $.get('http://localhost:8080/detail?id='+id,function(res){
	// 	var data = JSON.parse(res).data.film;
	// 	var arr =[];
	// 	arr[0] = data;
	// 	that.props.getDeteilData(arr);
	// 	console.log(arr);
	// })
	  
  }
  render() {
	return (
		<div className="components login">
				<label><input type="text" placeholder="输入手机号" ref="users"/><i></i><span className="yz1" ref="txt1" onTouchStart={this.send.bind(this)}>发送验证码</span></label>
				<label><input type="text" placeholder="输入密码" ref="pass"/><i></i></label>
				<label><input type="text" placeholder="图形验证码" ref="numVal"/><i></i><span className="yz2" ref="txt2" onTouchStart={this.send2.bind(this)}>刷新再试</span></label>
				<p className="tips" ref="tip"></p>
				<a  className="btn" onTouchStart={this.clickMe.bind(this)}>登录</a>
				{/*<Link to="/mypage" className="btn" onTouchStart={this.clickMe.bind(this)}>登录</Link>*/}
		</div>
	)
  }
	send(){
		var count=5;
		var that = this;
		var timer = null;
		clearInterval(timer);
		timer = setInterval(function(){	
			if(count==0){
				that.refs.txt1.innerHTML = "发送验证码";
				clearInterval(timer);
			}else{
				that.refs.txt1.innerHTML = count+"秒后重发";
			}
			count--;
		},1000)
		var num = "";
		for(var i  =0;i<6;i++){
			num+=parseInt(Math.random()*10);
		}
		alert("你的验证码为："+num);
	}
	send2(){
		var val = "";
		var numArr = ["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","s","y","z","A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"];
		for(var i = 0;i<4;i++){
			val+=numArr[parseInt(Math.random()*52)];
		}
		this.refs.txt2.innerHTML=val;
	}


  	clickMe(){
  		var that = this;
  		var user = that.refs.users.value;
		var pass = that.refs.pass.value;
		var numVal = that.refs.numVal.value;
		var num = that.refs.txt2.innerHTML;

		var tel = user.substr(-4);	
		that.props.getUserData(tel);	//保存手机号后4位

  		if(/(^\s+)|(\s+)$/.test(user)){ 
		    that.refs.tip.innerHTML ="手机号或邮箱不能为空"
		}else if(!(/^1[34578]\d{9}$/.test(user))){
			that.refs.tip.innerHTML ="请输入正确的手机号";
		}else if(numVal!=num){
			that.refs.tip.innerHTML ="验证码不匹配";
		}
		else{
			$.get("http://localhost:8080/myPage?user="+user+"&pass="+pass,function(res){
				for(var i=0;i<res.length;i++){
					console.log(res[i].msg,res[i].code);
					if(res[0].msg==1&&res[i].code=="数据保存成功"){	//账号新注册时
						that.refs.tip.innerHTML =res[i].code;
						window.location.href = "http://localhost:3000/mypage";
					}
					else if(res[i].msg==1&&res[i].code=="登录用户名及密码正确"){		//账号存在时,判断密码是否正确
						var tel = user.substr(-4);
						window.location.href = "http://localhost:3000/mypage";
					}else{		
						that.refs.tip.innerHTML =res[i].code;					
					}
				}
			})
		}
		
	 }

}

var Login = connect(
  function(state, ownProps) {
  	console.log(state)
	return {
		 
	}
  },
  function(dispatch, ownProps) {
   return {
		 changeTitle:function(data){
	          dispatch({
	                type:"CHANGETITLE",
	                title:data
	          })
      	},
      	getUserData:function(data){
      		console.log("data"+data)
      		dispatch({
      			type:"GETUSERDATA",
	            user:data
      		})
      	}
	}
  }
)(Logins);

export default Login;